<template>
    <div class="upload-wrapper">
        <div class="upload-list"  v-for="(item, index) in imgList" :key="index + item" @click="showList(index)">
            <span class="del-btn" @click.stop="removeItem(index)">x</span>
            <img :src="item" alt="">
        </div>
        <div class="upload-add" @click="addFile">
            <i class="iconfont icon-add"></i>
            <img :src="image" alt="">
        </div>
        <my-dialog v-model="isShow" :isMaskLayer="true" :maskHide="true">
            <div class="img-box">
                <div class="upload-item">
                    <input
                            type="file"
                            accept="image/*"
                            @change="getFile"
                            @click="isShow = !isShow"
                            capture="user"/>
                    拍照
                </div>
                <div class="upload-item">
                    <input
                            type="file"
                            @change="getFile"
                            @click="isShow = !isShow"/>
                    从相册选取
                </div>
            </div>
        </my-dialog>
        <my-dialog v-model="isShowList" :isMaskLayer="true" :maskHide="true">
            <my-swiper  :defaultIndex="defaultIndex"  pagingText="">
                <my-swiper-item class="item" :width="7.5" :height="'100%'" v-for="(item, index) in imgList" :key="index"><img
                        :src="item" alt=""/></my-swiper-item>
            </my-swiper>
        </my-dialog>
    </div>
</template>

<script>
    import MyDialog from './dialog'
    import MySwiper from '../components/slider/mySwiper'
    import MySwiperItem from '../components/slider/mySwiperItem'
    import lrz from '../tools/lrz'

    export default {
        name: 'upload',
        components: {
            MyDialog,
            MySwiper,
            MySwiperItem
        },
        data() {
            return {
                isShow: false,
                isShowList: false,
                defaultIndex: 1,
                imgList: [],
                image: ''
            }
        },
        props: {
            isList: {
                type: Boolean,
                default: true
            },
            isLrz: {
                type: Object,
                default() {
                    return {
                        isLrz: false,
                        H: 1000,
                        W: 1000
                    }
                }
            }
        },
        methods: {
            addFile() {
                this.isShow = true
            },
            getFileURL(file) {
                let getUrl = null;
                if (window.createObjectURL !== undefined) {
                    getUrl = window.createObjectURL(file);
                } else if (window.URL !== undefined) {
                    getUrl = window.URL.createObjectURL(file);
                } else if (window.webkitURL !== undefined) {
                    getUrl = window.webkitURL.createObjectURL(file);
                }
                return getUrl;
            },
            getFile(obj) {
                let file = obj.target.files[0]
                if (this.image) {
                    this.removeImg()
                }
                if (file && file.type.startsWith('image')) {
                    this.fileUpload(file)
                } else {
                    this.$toast.show('请上传正确图片文件！')
                }
            },
            async fileUpload(file) {
                let data = this.isLrz.isLrz ? await lrz.lrzImg(file) : file
                this.$emit('request-img', data)
                let imageUrl = this.getFileURL(file)
                window.console.log(imageUrl)
                if (this.isList) {
                    this.imgList.push(imageUrl)
                    return
                }
                this.image = imageUrl
                // let res = await this.$request.post('/api/vue/upload/uploadImg', fileData)
                // if (res.data.status !== 1) return this.$myConfirm.show({title: '上传错误', content: res.data.data.code})
                // let result = res.data.data[0]
                // this.image = result
            },
            showList(index) {
                this.isShowList = true
                this.defaultIndex = index
            },
            removeItem(index) {
                this.imgList.splice(index, 1)
                this.$emit('remove-img', index)
            },
            removeImg() {
                this.$emit('remove-img')
            },
            showImg () {
                window.console.log(this.image)
            }
        },
        watch: {
            image() {
                this.showImg()
            }
        }
    }
</script>

<style lang="less" scoped>
    .upload-wrapper {
        display: flex;
        flex-wrap: wrap;
        .upload-add, .upload-list {
            display: inline-block;
            margin-bottom: .12rem;
            margin-right: .15rem;
            width: 1.58rem;
            height: 1.58rem;
            border: .03rem dashed #e5e5e5;
            border-radius: .1rem;
            position: relative;
            line-height: 1.58rem;
            text-align: center;

            img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            .icon-add {
                font-size: .8rem;
                color: #9a9a9a;
            }
            .del-btn {
                display: block;
                position: absolute;
                right: -.13rem;
                top: -.13rem;
                line-height: .26rem;
                height: .26rem;
                font-size: .3rem;
                color: #111;
                width: .26rem;
                /*border: 1px solid #445566;*/
                background: #e1e1e1;
                border-radius: 50%;
                z-index: 10;
            }
        }
        .img-box {
            overflow: hidden;
            background-color: #fff;
            width: 5.4rem;
            border-radius: .2rem;
            .upload-item {
                position: relative;
                height: .8rem;
                border-bottom: #eee solid 1px;
                line-height: 1rem;
                text-align: center;
                input {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    z-index: 1;
                }
            }
        }
        .item {
            box-sizing: border-box;
            position: relative;
            display: flex;
            align-items: center;
            /*padding: .5rem 0;*/
            img {
                width: 100%;
            }
        }
    }
</style>
